<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 500px;
            height: 500px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>

</html>

<script>
    //setlnterval()函数的用法与setTimeout()完全一致，区别仅仅在于setlnterval()指定某个任务每隔一段时间就会执行一次，也就是无限次的执行定时器
    // var i = 0;
    // setInterval(function(){
    //     i++
    //     console.log(i)
    // },1000)
    var box = document.getElementById("box");
    var opacity = 0;
    var my = setInterval(function () {
        opacity += 0.05;
        box.style.opacity = opacity;
        if (opacity >= 1) {
            clearInterval(my)
        }   
    }, 200)
</script>